import Vue from 'vue';
import store from '../../store/index'
import telephoneBookingComponent from 'components/voiceCall/telephoneBooking.vue';

telephoneBookingComponent.newInstance = properties => {
    const _props = properties || {};

    const Instance = new Vue({
        data: Object.assign({}, _props),
        store,
        render(h) {
            return h('div', { 'class': { mask: true } }, [
                h(telephoneBookingComponent, {
                    props: Object.assign({}, _props),
                }, [])
            ]);
        }

    });

    const component = Instance.$mount();
    document.body.appendChild(component.$el);
    const componentMod = Instance.$children[0];
    return {
        show(props) {
            // notice when component destroy
            componentMod.$parent.onRemove = props.onRemove;

            componentMod.visible = true;
        },
        remove() {
            document.body.removeChild(component.$el);
        },
        component: componentMod
    };
};

let componentInstance;

function getComponentInstance(options) {
    componentInstance = telephoneBookingComponent.newInstance(options);
    return componentInstance;
}

function showComponent(options) {
    let instance = getComponentInstance(options);
    options.onRemove = function() {
        componentInstance = null;
    };

    instance.show(options);
}

telephoneBookingComponent.showTelephoneBooking = function(props = {}) {
    return showComponent(props);
};

telephoneBookingComponent.remove = function(node) {
    componentInstance.remove();
};

export default telephoneBookingComponent;